<template>
  <div id="error">
    <h1>出错了</h1>
    <p>找不到相关模块,系统会在<span>{{ counter }}</span>秒后回到主界面</p>
  </div>
</template>

<script>
/**
 * 这是错误页面提示(404)
 */
export default {
  name: 'Error404',
  data () {
    return {
      /**
       * 3秒后返回到主页
       */
      counter: 3,
      /**
       * 解决后退bug
       */
      go: true
    }
  },
  mounted () {
    this.timer()
  },
  methods: {
    /**
     * 记时器
     * 倒记时操作,当记记数器减到0,则返回到首页
     */
    timer () {
      setTimeout(() => {
        this.counter--
        if (this.counter <= 0 && this.go) {
          this.$router.push('/')
        } else {
          this.timer()
        }
      }, 1000)
    }
  },
  destroyed () {
    this.go = false
  }
}
</script>

<style scoped lang="stylus">
#error
  padding 100px 0

  h1
    font-size 24px
    color red

  p
    margin-top 20px
    font-size 14px

    span
      color red

</style>
